<template>
	<div class="wrap">
		<SubTitle :title="info.msgType" img="global/消息.png" />

		<div class="chat-box">
			<div class="content">
			<!-- <div class="content" v-for="(item, index) in info.mess" :key="index"> -->
				<div class="user">{{ info.createUserAccount }}</div>
				<div class="mess">
					<!-- <div class="weidu">
						<div class="title">{{ info.readCount ? info.readCount : 0 }}人未读</div>
					</div> -->
					<span v-html="info.msgContent"></span>
				</div>
			</div>
		</div>
		<!-- <div class="btn" @click="readedStatus = true" :class="{ active: readedStatus }">
			{{ readedStatus ? '已读' : '未读' }}
		</div> -->
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'

	interface Props {
		info: {
			// title: string
			// user: string
			// readedPerson: number
			// mess: string[]
			// createUserAccount: string
			// msgType: any
			// msg: string
			// notifyGroup: string
			// readCount: any
      msgType: string,
      createUserAccount: string,
      msgContent: string;
		}
	}
  
  // const info = ref<any>({
  //   title: '列车到达通知',
  //   user: '管理员',
  //   readedPerson: 5,
  //   notifyGroup: "",
  //   mess: [
  //     `7:30-8:00 预计到达旅客 2497人； 8:00-9:00 预计到达旅客 1780； 10:00-11:00 预计到达旅客2603人11:00-12:00
  //   预计到达旅客3708人； 14:00-15:00 预计到达旅客 1708人； 夜间 23:00-次日5:30
  //   预计到达旅客1171人，以上客流较大，请单位及时关注昨日实际发送 75 列，实际到达75列，实际发送旅客 26963
  //   人实际到达旅客 36290 人。今日预计发送 71列，预计到达70列，预计发送旅客 1.64 万人预计到达旅客 2.42 万人。`,
  //   ],
  // });

  withDefaults(defineProps<{
    info?: {  // 添加可选标识
      msgType: string,
      createUserAccount: string,
      msgContent: string;
    };
  }>(), {
    info: () => ({  // 提供默认值
      msgType: "",
      createUserAccount: "",
      msgContent: ""
    })
  });
	const readedStatus = ref(false)
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		background-image: url(@img/global/panel-bg.png);
		background-size: 100% 100%;
		padding-bottom: 50px;
		position: relative;
		width: 100%;
		height: 850px;
		.content {
			display: flex;
			width: 100%;
			padding: 20px 20px;
			font-size: 36px;

			.mess {
				text-align: justify;
				width: 1550px;
				background: #141e37;
				line-height: 60px;
				padding: 30px;
				padding-right: 150px;
				border-radius: 10px;
				margin-left: 60px;
				position: relative;
				letter-spacing: 5px;
				box-sizing: border-box;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 60px;
					width: 40px;
					height: 40px;
					transform: translateX(-100%);
					background-image: linear-gradient(45deg, transparent 0%, transparent 50%, #141e37 50%, #141e37 100%);
				}
			}
		}
		.user {
			background-color: rgba(5, 63, 113, 1);
			color: #fff;
			width: 120px;
			height: 120px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
		}
		.chat-box {
			height: calc(100% - 82px);
			overflow: auto;
		}
		.btn {
			position: absolute;
			padding: 15px 36px;
			right: 50px;
			bottom: 20px;
			background: linear-gradient(180deg, #053f71 0%, #1868ae 99%);
			border-radius: 10px;
			cursor: pointer;
			font-size: 30px;
			&.active {
				background: linear-gradient(180deg, rgba(5, 113, 90, 0.4) 0%, rgba(22, 194, 177, 0.4) 100%);
			}
		}
		.weidu {
			position: absolute;
			width: 122px;
			height: 124.5px;
			background-image: url(@/assets/images/global/未读.png);
			background-size: 100% 100%;
			right: 0;
			top: 0;
			.title {
				transform: rotateZ(45deg);
				font-size: 25px;
				text-align: center;
				margin-top: 15px;
				margin-left: 30px;
				letter-spacing: 0;
			}
		}
	}
</style>
